<template>
  <div class="app-container">
    <el-form v-model="searchParams" label-width="100px" :inline="true">
      <el-form-item label="通用能力名称">
        <el-input v-model="searchParams.generalName" placeholder="请输入通用能力名称" clearable/>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-select v-model="searchParams.generalStatus" placeholder="启用状态" clearable size="small">
          <el-option
            v-for="item in generalStatusList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button style="margin-left: 10px" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="generalAbilityList" v-loading="loading" highlight-current-row>
      <el-table-column type="selection" width="55px" align="center"/>
      <el-table-column type="index" label="序号" align="center"/>
      <el-table-column label="通用能力名称" prop="generalName"/>
      <el-table-column label="能力描述" prop="generalDescribe"/>
      <el-table-column label="启用状态" prop="generalStatus">
        <template slot-scope="scope">
          <el-switch
                  v-model="scope.row.generalStatus"
                  active-value="0"
                  inactive-value="1"
                  @change="changeStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
        >编辑</el-button>
        <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row.id)"
        >删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pageParameter.page"
            :limit.sync="pageParameter.rows"
            @pagination="getList"
    />
    <el-dialog :title="title" v-if="open" :visible.sync="open" width="500px" append-to-body>
      <generalAbilityForm ref="generalAbilityForm" @cancel="cancel"></generalAbilityForm>
    </el-dialog>
  </div>
</template>

<script>
  import {searchByPage, updateGeneralAbility, deleteGeneralAbility} from "@/api/assess/examGeneralAbility"
  import generalAbilityForm from "@/views/assess/general-ability/form/generalAbilityForm"
  export default {
    components: {
      generalAbilityForm
    },
    created() {
      this.getDicts("general_status").then(response => {
        this.generalStatusList = response.responseBody.result
      })
      this.getList()
    },
    data() {
      return {
        title: '',
        open: false,
        loading: false,
        total: 0,
        pageParameter: {
          page: 1,
          rows: 10
        },
        searchParams: {},
        // 启用状态数据字典
        generalStatusList: [],
        // 通用能力列表
        generalAbilityList: []
      }
    },
    methods: {
      // 获取通用能力列表
      getList() {
        this.loading = true
        searchByPage({
          searchParams: this.searchParams,
          pageParameter: this.pageParameter
        }).then(response => {
          this.generalAbilityList = response.responseBody.result
          this.total = response.responseBody.pageParameter.totalCount
        }).finally(() => {
          this.loading = false
        })
      },

      // 搜索
      handleQuery() {
        this.getList()
      },

      // 重置
      reset() {
        this.searchParams = {}
        this.getList()
      },

      // 新增
      add() {
        this.title = '添加通用能力'
        this.open = true
      },

      // 表单回调f方法
      cancel() {
        this.open = false
        this.getList()
      },

      // 更新
      handleEdit(row) {
        this.title = '修改通用能力'
        this.open = true
        this.$nextTick(() => {
          this.$refs.generalAbilityForm.init(row.id)
        })
      },

      // 删除
      handleDelete(id) {
        this.$confirm('确定要删除此记录吗？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGeneralAbility(id).then(response => {
            if(response.retCode === '200'){
              this.$message.success('删除成功')
              this.getList()
            }
          })
        }).catch(() => {})
      },

      // 更新启用状态
       changeStatus(row) {
        let status = row.generalStatus === '0' ? '启用' : '停用'
        this.$confirm('您确定要' + status + '名称为\"' + row.generalName + '\"的通用能力吗？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return updateGeneralAbility({
            id: row.id,
            generalStatus: row.generalStatus
          })
        }).then(() => {
          this.$message.success(status + '成功！')
        }).catch(() => {
          row.generalStatus = row.generalStatus === '0' ? '1' : '0'
        })
      }
    }
  }
</script>
